<!-- 浏览记录 -->
<template>
	<view class="collection-bg">
		<!-- 循环列表 -->
		<view class="deleteAll" v-if="dataList[0]" @click="onDelete({
			pk_id:vuex_user.pk_id,
			type:2
		})">
			清除全部
		</view>
		<view class="collection" v-for="(item, index) in dataList" :key="item.pk_id" @click="goDetail(item)">
			<view class="collection-item flex">
				<image :src="formatPictureImg(item.product_img)" class="collection-image  u-margin-left-30"></image>
				<view class="details">
					<view class="details-flex">
						<view class="place u-line-2">{{ item.product_name }}</view>
						<view class="delete-details iconfont iconfont-e74b" @click.stop="onDelete({
							pk_id:item.pk_id,
							type:1
						})">
						</view>
					</view>
					<view class="collection-time flex">
						<view class="time-date">{{ item.date_creation | formtime }}</view>
						<view class="sww-tp">{{ item.duration || 0 }}s</view>
					</view>
				</view>
			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
	import {
		uniModal,
		uniToast,
	} from '@/utils/uniPromise.js';
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		formatDate
	} from '@/utils/moment/index.js';
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				dataList: [], //浏览列表
				prodTypeObj: {
					1: 9, // 门票
					2: 4,
					3: 3,
					4: 1,
					5: 5,
					6: 6,
					7: 7
				}
			};
		},
		filters: {
			// 金币格式化
			formtime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
			}
		},
		onLoad: function() {
			this.initPage();
		},
		onReachBottom: function() {
			this.loadMore();
		},
		methods: {
			// 页面初次渲染
			initPage() {
				this._init_data('GetUsersBrowseList');
			},
			loadMore() {
				this._load_data();
			},
			goDetail(item) {
				this.$toProd({
					pk_id: item.fk_pro_id,
					prodType: this.prodTypeObj[item.type]
				});
			},
			onDelete(item) {
				// 当时对接的时候说的是 如果为批量删除的时候 pk_id变成传用户id 然后 type传2
				uniModal({
					content: item.type == 2 ?'是否批量删除':'删除记录'
				}).then(() => {
					this.$resPost('DeleteUsersBrowse', {
						...item
					}).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						this.initPage()
					}).catch(() => {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
						this.initPage()
					})
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}
</style>
<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.deleteAll {
		background-color: #ff1f00;
		margin: 0 20rpx 20rpx auto;
		color: #ffffff;
		width: 140rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5rpx;
		font-size: 26rpx;
	}

	.collection {
		position: relative;
		padding: 0 20rpx;
	}

	.collection-item {
		padding: 20rpx 0;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.collection-image {
			display: flex;
			width: 190rpx;
			height: 150rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
		}
	}

	.details {
		flex: 1;
		padding-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.details-flex {
			display: flex;
			justify-content: space-between;

			.place {
				flex: 1;
				overflow: hidden;
				padding-top: 8rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}

			.delete-details {
				font-size: 34rpx;
				padding: 6rpx 0 6rpx 20rpx;
			}
		}
	}

	.collection-time {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5rpx;
		font-size: 24rpx;
		color: #666666;
	}

	/deep/ .u-empty {
		height: 100vh;
	}
</style>
